<template>
  <div>
    <Button
      style="float: left; margin-right: 8px"
      icon="ios-add"
      type="primary"
      shape="circle"
      @click="initmodal1(opcourse)"
    >增加选考课程</Button>
    <Modal v-model="modal1" title="录入选考课程" width="480" scrollable @on-ok="addOpc(opcourse)">
      <div>
        <Form :model="opcourse" :label-width="120" label-position="left">
          <FormItem label="课程编码：">
            <Select v-model="opcourse.csId" filterable style="width: 90%">
              <Option
                v-for="item in csIdList"
                :value="item.csId"
                :key="item.csId"
                :label="item.csId"
              >
                <span>{{item.csId}}</span>
                <span style="float:right;color:#808695">{{item.csName}}</span>
              </Option>
            </Select>
          </FormItem>
          <FormItem label="选考组别：">
            <Input v-model="opcourse.corOptgroup" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="组别学分：">
            <Input v-model="opcourse.corGroupcredit" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="组别门数：">
            <Input v-model="opcourse.corOptcount" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="专业方向：">
            <Select v-model="opcourse.mrId" filterable style="width: 90%">
              <Option
                v-for="item in mrIdList"
                :value="item.mrId"
                :key="item.mrId"
                :label="item.mrId"
              >
                <span>{{item.mrId}}</span>
                <span style="float:right;color:#808695">{{item.oriName}}</span>
              </Option>
            </Select>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <br />
    <br />
    <br />

    <Table border :columns="columnshead" :data="datat"></Table>
  </div>
</template>

<script>
export default {
  props: ["majorId", "mvId"],
  data() {
    return {
      columnshead: [
        {
          type: "index",
          title: "序号",
          width: 60
        },
        {
          title: "专业编码",
          key: "mjId"
        },
        {
          title: "课程编码",
          key: "csId"
        },
        {
          title: "方向编码",
          key: "mrId"
        },
        {
          title: "选考组别",
          key: "corOptgroup"
        },
        {
          title: "选考门数",
          key: "corOptcount"
        },
        {
          title: "选考学分",
          key: "corGroupcredit"
        },
        {
          title: "计划版本",
          key: "mvId"
        }
      ],
      datat: [],
      modal1: false,
      opcourse: {},
      mrIdList: [],
      csIdList: []
    };
  },
  created() {
    this.$axios
      .get(
        this.$host +
          "/Majorcourse/courseoptionalrelationByMajor?mjId=" +
          this.majorId
      )
      .then(res => {
        this.datat = res.data.data;
      });

    this.$axios
      .get(
        this.$host +
          "/MajorOrientation/majorOrientationByMajor?mjId=" +
          this.majorId
      )
      .then(res => {
        this.mrIdList = res.data.data;
      });

    this.$axios
      .get(this.$host + "/course/management/allCourses?pageNum=1&pageSize=9999")
      .then(res => {
        this.csIdList = res.data.data.list;
      });
  },

  methods: {
    initmodal1(opcourse) {
      this.modal1 = true;
      for (var key in opcourse) {
        this.$delete(opcourse, key);
      }
    },
    addOpc(opcourse) {
      opcourse.mvId = this.mvId;
      opcourse.mjId = this.majorId;
      opcourse.corId = Math.ceil(Math.random() * 10);
      this.$axios
        .post(this.$host + "/Majorcourse/courseoptionalrelation", opcourse)
        .then(res => {
          if (res.data.message == "新增成功") {
            this.$Message.success("添加选考课程成功");
            if (this.datat.length == 10) {
              this.datat.pop();
            }
            var obj = JSON.parse(JSON.stringify(opcourse)); //解决相同对象覆盖问题，深度拷贝解决初始化清空
            this.datat.unshift(obj);
            this.total++;
          } else this.$Message.error("添加选考课程失败");
        });
    }
  }
};
</script>
